<template>
	<view>
		<!-- 自定义导航栏 -->
		<view class="navBarBox">
			<!-- 状态栏占位 -->
			<view class="statusBar" :style="{ paddingTop: statusBarHeight + 'px' }"></view>
			<!-- 真正的导航栏内容 -->
			<view class="navBar">
				<image src="../../../static/icon_back.png" class="iv_back" @click="back()"></image>
				<view class="tv_title" v-if="type==1">创建</view>
				<view class="tv_title" v-if="type==2">编辑</view>
				<image src="../../../static/icon_ok.png" class="iv_ok" @click="writeNote()"></image>
			</view>
			<view class="view_line"></view>
		</view>
		<view class="container">
			<input type="text" placeholder="请输入标题" v-model="note.title" focus class="input_title" @input="titleChange" />
			<textarea type="text" placeholder="请输入内容" v-model="note.content" class="input_content" @input="contentChange" />
		</view>
	</view>
</template>

<script>
	import {
		isOpenDB,
		openDB,
		createTable,
		selectSQL,
		droptable,
		insertData,
		closeDB,
		updateData
	} from '../sqlite/sqlite.js'
	export default {
		data() {
			return {
				type: 1,
				// 状态栏高度
				statusBarHeight: 0,
				// 导航栏高度
				navBarHeight: 82 + 11,
				note: {}
			}
		},
		methods: {
			back() {
				uni.navigateBack()
			},
			writeNote() {
				if (this.type == 1) {
					this.note.add_time = this.getDateTime()
					this.note.update_time = this.getDateTime()
					this.note.note_code = this.getTimeStamp()
					insertData(this.note,res=>{
						console.log(res)
					})
				} else {
					this.note.update_time = this.getDateTime()
					updateData(this.note,res=>{
						console.log(res)
					})
				}
			},
			titleChange: function(event) {
				console.log(event)
				this.note.title = event.target.value
			},
			contentChange: function(event) {
				console.log(event)
				this.note.content = event.target.value
			},
			getDateTime: function() {
				var date = new Date();
				var seperator1 = "-";
				var seperator2 = ":";
				var year = date.getFullYear();
				var month = date.getMonth() + 1;
				var strDate = date.getDate();
				var strHour = date.getHours();
				var strMinute = date.getMinutes();
				if (month >= 1 && month <= 9) {
					month = "0" + month;
				}
				if (strDate >= 0 && strDate <= 9) {
					strDate = "0" + strDate;
				}
				if (strHour >= 0 && strHour <= 9) {
					strHour = "0" + strHour;
				}
				if (strMinute >= 0 && strMinute <= 9) {
					strMinute = "0" + strMinute;
				}
				var currentdate = year + seperator1 + month + seperator1 + strDate+" "+strHour+seperator2+strMinute;
				return currentdate;
			},
			getTimeStamp: function() {
				var date = new Date();
				return date.getTime()
			}
		},
		onLoad: function(option) {
			console.log(option)
			this.type = option.type
			var noteObj=JSON.parse(option.note)
			this.note.note_id = noteObj.note_id;
			this.note.title = noteObj.title;
			this.note.content = noteObj.content;
		},
		created() {
			//获取手机状态栏高度
			this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'];
		}
	}
</script>

<style lang="scss">
	page {
		width: 100%;
		height: 100%;
	}

	.navBarBox {}

	.navBarBox .statusBar {}

	.navBarBox .navBar {
		padding-left: 20rpx;
		padding-right: 20rpx;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.iv_back {
		width: 30rpx;
		height: 40rpx;
		position: absolute;
		left: 20rpx;
	}

	.tv_title {
		font-size: 40rpx;
	}

	.iv_ok {
		width: 40rpx;
		height: 40rpx;
		position: absolute;
		right: 20rpx;
	}

	.container {
		display: flex;
		flex-direction: column;
		flex: 1;
	}

	.input_title {
		border: 5rpx solid $color_line;
		border-radius: 10rpx;
		width: 90%;
		height: max-content;
		margin-left: 5%;
		color: black;
		margin-right: 5%;
		padding: 30rpx;
		margin-top: 5%;
	}

	.input_content {
		border: 5rpx solid $color_line;
		border-radius: 10rpx;
		width: 90%;
		min-height: 150rpx;
		margin-left: 5%;
		margin-right: 5%;
		padding: 30rpx;
		margin-top: 5%;
	}

	.view_line {
		width: 100%;
		height: 1rpx;
		margin-top: 20rpx;
		background-color: $color_line;
	}
</style>
